@import 'mixin';
@import 'iconfont';
@import 'color';

.container{
  &.login{background:$gray_bg url(../img/bg_gray.png) no-repeat center bottom;background-size:cover;
    .header{
      .logo{background:url(../img/logo.png) no-repeat center;background-size:cover;}
      .right_nav{
        ul{
          li{color:$gray_blue;}
        }
      }
    }
    .content{
      h1{background-image: -webkit-gradient(linear, 0 0, 0 bottom, from(rgba($darker, 1)), to(rgba($black, 1)));-webkit-background-clip: text; -webkit-text-fill-color: transparent;}
      .login_form{
        .input_div{border:1px solid $darker;
          label{
            &.user{background:url(../img/theme_gray/username.png) no-repeat center;}
            &.pwd{background:url(../img/theme_gray/password.png) no-repeat center;}
          }
        }
        .input_btn{
          button{color:$white;background:$gray_blue;}
        }
      }
    }
  }
  .main_header{background-image:-webkit-gradient(linear, 0 0, 0 bottom, from(rgba($gray, 1)), to(rgba($gray_bg, 1)));background-color:$gray_bg;box-shadow:0 0 2px rgba($black,.3);
    .l_cont{
      .logo{background:url(../img/theme_gray/logo.png) no-repeat center;}
      h1{color:$gray_blue;}
    }
    .m_cont{color:$black;
      a{color:$black;}
    }
    .r_cont{
      .cont{
        &:first-child{
          p{color:$black;}
        }
        &:last-child{color:$black;
          i{color:$gray_blue;}
        }
      }
    }
  }
  .menu{border-right:1px solid $gray_bg;background-color:$gray;
    .head{color:$darker;background-color:#e6e6e6;
      .slip{background:$gray_blue;}
    }
    .user_cont{background-color:$gray_bg;
      p{color:$darker;}
    }
    .nav{
      li{
        .fa.fa-caret-right,.fa.fa-caret-down,.iconfont{color:$darker;}
        a{color:$darker;}
        ul{
          li{
            a{color:lighten($darker,10%);
              &:hover{color:$gray_n_blue;}
            }
            &.active{
              a{color:$gray_n_blue;font-weight:600;}
            }
          }
          &.sub_nav{
            li{border-color:darken($dark,20%);
              span{background-color:$darker;}
              &.active{
                span{background-color: $gray_n_blue}
                a{color:$gray_n_blue;}
              }
              ul{
                li{
                  span{background-color:darken($dark,20%) !important;}
                  a{color:darken($dark,40%) !important;;}
                  &.active{
                    span{background-color: $gray_n_blue !important;}
                    a{color:$gray_n_blue !important;font-weight:600;}
                  }
                }
              }
            }
          }
        }
        &.active{
          .fa.fa-caret-right,.fa.fa-caret-down,.iconfont{color:$black;}
          a{color:$black;}
          ul{
            li{color:$darker;}
          }
        }
      }
    }
  }
  .main_cont {
    background-color: $gray_light;
    .tabs {border: 1px solid $gray_bg;
      ul {
        background-color: $gray_light;
        li {
          background-color: $gray_light;
          border: {
            top: 1px solid $gray_bg;
            right: 1px solid $gray_bg;
            bottom: 0;
            left: 1px solid $gray_bg;
          }
          &.active {
            background-color: lighten($dark, 1%);
            color: $gray_n_blue;
          }
        }
      }
    }
  }
  .r_ctrl_cont{background-color:$ctrl_bg;
    .r_ctrl{background-color:$gray_c_blue;transition:all .5s ease-in-out;
      i{color:$darker;}
    }
    .title{border-bottom:1px solid $gray_bg;color:$black;}
    .label{color:$black;}
    .cont{border-bottom:1px solid $gray_bg;}
    &.show_ctrl{
      .r_ctrl{background-color:$dark_blue;transition:all .5s ease-in-out;
        i{color:$white;}
      }
    }
  }
}
  .tab_ctrl{background-color:lighten($dark,1%);border:{top:0;right:1px solid $gray_bg;bottom:1px solid $gray_bg;left:1px solid $gray_bg;};margin-top:0;
    .search_cont{border-bottom:1px solid $gray_bg;}
    .ctrl_cont{
      ul{
        li{border-right:1px solid lighten($darker,20%);color:$gray_n_blue;}
      }
    }
    &.no_bg{
      .search_cont{border-bottom:1px solid $gray_bg;}
    }
  }
  .tab_cont,.tab_c{border:{top:0;right:1px solid $gray_bg;bottom:1px solid $gray_bg;left:1px solid $gray_bg;};
    .paginate{border-top:1px solid $gray_bg;}
  }

.form_cont{
  .input_inline{
    input[type=text],select{border:1px solid $darker;}
  }
}
.btn{border:1px solid $dark_blue;color:$dark_blue;
  &.main_btn{background-color:$dark_blue;}
  &:hover{background-color:$dark_blue;color:$white;}
  &.btn_prime{color:$white;}
}
.popup{
  .popup_head{color:$black;background-image: linear-gradient(-180deg, #F1F1F1 0%, #E2E2E2 100%);}
}
.alert{
  .alert_head{color:$black;background-image: linear-gradient(-180deg, #F1F1F1 0%, #E2E2E2 100%);}
}